.<template>
  <div
    ref="closepopoverRef"
    style="padding: 10px 30px;"
  >
    <el-table :data="tableData">
      <el-table-column
        prop="prodName"
        label="商品名称"
        show-overflow-tooltip
        min-width="150"
      >
        <template #default="scope">
          {{ scope.row.prodName }}
        </template>
      </el-table-column>

      <el-table-column
        prop="skuCode"
        label="型号"
        min-width="150"
      >
        <template #default="scope">
          <el-button
            v-if="scope.row.selfShop == 1 && scope.row.prodId && scope.row.skuId"
            type="text"
            @click="goToPrice(scope.row)"
          >
            {{ scope.row.skuCode }}
          </el-button>
          <span v-else>{{ scope.row.skuCode }}</span>
        </template>
      </el-table-column>

      <el-table-column
        prop="shopName"
        label="品牌"
        min-width="150"
      >
        <template #default="scope">
          {{ scope.row.shopName || '--' }}
        </template>
      </el-table-column>

      <el-table-column
        prop="buyerRemark"
        label="客户备注"
        show-overflow-tooltip
        min-width="150"
      >
        <template #default="scope">
          {{ scope.row.buyerRemark || '--' }}
        </template>
      </el-table-column>

      <el-table-column
        prop="sellerRemark"
        label="商家备注"
        show-overflow-tooltip
        min-width="150"
      >
        <template #default="scope">
          {{ scope.row.sellerRemark || '--' }}
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        align="center"
        :label="$t('publics.operating')"
        width="120"
      >
        <template #default="scope">
          <div class="text-btn-con">
            <div
              v-if="scope.row.prodId && scope.row.skuId && scope.row.skuCode"
              class="default-btn text-btn"
              @click="onViewHistory(scope.row)"
            >
              报价历史
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <inq-history
      ref="inqHistoryRef"
      @go-to-detail="goToDetail"
    />
  </div>
</template>

<script setup>
import { ElMessage, ElLoading } from 'element-plus'
import { isAuth } from '@/utils'
import inqHistory from './inq-history.vue'

const emit = defineEmits(['refresh'])

const props = defineProps({
  orderNo: {
    type: String,
    default: ''
  }
})

const page = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 9999 // 每页显示多少条
})

const tableData = ref([])
const getList = (pageParam) => {
  const params = {
    orderNo: props.orderNo,
    current: pageParam == null ? page.currentPage : pageParam.currentPage,
    size: pageParam == null ? page.pageSize : pageParam.pageSize
  }
  http({
    url: http.adornUrl('/shop/notAllowedInquiry/page'),
    method: 'get',
    params: http.adornParams(params)
  }).then(({ data }) => {
    tableData.value = (data.records || [])
    page.total = data.total
    // 末尾页数据为空重新请求
    if (!tableData.value.length && tableData.currentPage > 1) {
      page.currentPage = 1
      getList(page)
    }
  })
}

const inqHistoryRef = ref(null)
const onViewHistory = (row) => {
  inqHistoryRef.value?.init(row)
}

const route = useRoute()
const goToDetail = (row) => {
  const { page, search, status } = route.query
  router.push({
    path: '/self/inquiry/detail',
    query: { orderNo: row.orderNo, page, search, status }
  })
  nextTick(() => {
    emit('refresh', {
      orderNo: row.orderNo
    })
  })
}

const router = useRouter()
const goToPrice = (row) => {
  const { prodId, skuCode, shopId, selfShop } = row
  if (selfShop == 1) {
    router.push({
      path: '/self/price-manage/price',
      query: { prodId, shopId, skuCode }
    })
  } else {
    ElMessage.warning('非自营商品')
  }
}

onMounted(() => {
  getList(page)
})

const init = () => {
  nextTick(() => {
    getList(page)
  })
}

defineExpose({
  init
})

</script>

<style lang="scss" scoped>

</style>
